<template>
	<view class="app-proxyorder">
		<view class="app-proxyorder__bg"></view>
		<view class="e-zindex2">
			<view class="e-p-t-64 e-flex-xy-center fw-600 e-m-b-30 c-white">
				<text class="e-m-r-16 e-font-40">{{ $unitEn }}</text>
				<text class="e-font-68">{{money}}</text>
			</view>
			<view class="c-white e-font-26 e-m-b-50 e-flex-xy-center">代付订单已创建成功，发给好友帮您付款吧～</view>
			<view class="e-p-l-20 e-p-r-20">
				<view class="e-radius-20 bg-white e-p-l-30 e-p-r-30">
					<view class="e-font-30 e-p-t-40">
						帮付人
					</view>
					<view class="app-proxyorder__input e-flex-y-center e-m-b-40">
						<input v-model="payUserName" type="text" placeholder="请输入对方账号" border="none" />
					</view>
					<view class="e-p-l-30 e-p-r-30 e-p-b-40">
						<view class="app-proxyorder__btn e-flex-xy-center" @tap="handleSubmit">
							<text class="c-white w-500 e-font-30">确定</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue';
	import {
		postPurchaseOneGoods,
		postPurchaseCartGoods,
		postAgainPurchaseGoods,
		getPayResult,
	} from '@/common/request/api';
	
	import { useCurrentInstance } from '@/common/hooks';
	import { usePay } from '../hooks/usePay';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const ctx = useCurrentInstance();
	const money = ref('')
	const payUserName = ref('')
	const { payLoading, systemPay } = usePay();
	
	onLoad((opt) =>{
		money.value  = opt.money
	})

	const handleSubmit = async function() {
		if (!payUserName.value) {
			return ctx.$toastApp('请输入对方账号')
		}
		const orderParams = uni.getStorageSync('orderParams')
		if (orderParams) {
			const data = JSON.parse(orderParams)
			console.log(data,'data')
			data.data.payUserName = payUserName.value
			let res
			switch(data.type) {
				case '1':
				res = await postPurchaseOneGoods(data.data);
				break;
				break
				case '2':
				res = await postPurchaseCartGoods(data.data);
				break
				case '3':
				res = await postAgainPurchaseGoods(data.data);
				break
			}
			systemPay({
				payType:data.payType,
				resolveData: res,
				api: getPayResult,
				storageKey: 'payOrderId',
				payUrl: res.data,
				payParams: data.data,
				successUrl: id => `systemPay/proxyOrder/success?type=4&id=${id}`,
				errorUrl: msg => `order/error?msg=${msg}`,
				orderUrl: 'order/index?type=1',
				isTrace: data.isTrace,
				requireOrder:data.requireOrder,
				payMoney: data.payMoney
			});
		}
	}
</script>

<style lang="scss" scoped>
	.e-zindex2 {
		position: relative;
		z-index: 2;
	}
	.e-font-68 {
		font-size: 68rpx;
	}
	@include appBem_b(proxyorder) {
		@include appBem_e(bg) {
			width: 100vw;
			height: 400rpx;
			background: #4B68E3;
			position: absolute;
			top: 0;
			left: 0;
		}
		@include appBem_e(input) {
			height: 120rpx;
			box-shadow: inset 0px -1rpx 0px 0px #EDEDED;
		}
		@include appBem_e(btn) {
			height: 100rpx;
			background: #4B68E3;
			border-radius: 50rpx;
		}
	}
</style>